<template>
	<div>
		<el-card>
			<div class="detail_top">
				<span style="font-size: 20px;">{{detailData.product_name}}</span>
				<div>
					<span>概述</span>
					<span>参数</span>
					<span>用户评价</span>
				</div>
			</div>
		</el-card>
		<div class="detail_down">
			 <div class="detail_left">
			    <el-carousel height="560px" width="560px" indicator-position="outside">
			      <el-carousel-item v-for="item in detailPicture" :key="item.id">
			        <img :src="'http://106.15.179.105:3000/'+item.product_picture" alt="">
			      </el-carousel-item>
			    </el-carousel>
			 </div>
			 <div class="detail_right">
				 <p style="font-size: 24px;">{{detailData.product_name}}</p>
				 <p style="color: rgb(176, 176, 176);padding-top: 10px;">{{detailData.product_intro}}</p>
				 <p style="color: rgb(255, 103, 0);padding-top: 10px;">小米自营</p>
				 <div class="price">
					 <span>{{detailData.product_selling_price}}</span>
					 <span class="del">{{detailData.product_price}}</span>
				 </div>
				 <div class="pro-list">
					 <span class="pro-name">{{detailData.product_name}}</span>
					 <span class="pro-price"><span>{{detailData.product_selling_price}}元</span><span class="pro-del" style="">{{detailData.product_price}}元</span></span>
					 <p class="price-sum">总计 : {{detailData.product_selling_price}}元</p>
				 </div>
				 <div class="button">
					 <button type="button" class="el-button shop-cart el-button--default">
						<span>加入购物车</span>
					 </button>
					 <button type="button" class="el-button like el-button--default">
						<span>喜欢</span>
					 </button>
				</div>
				<div class="pro-policy">
					<ul>
						<li><i class="el-icon-circle-check"></i> 小米自营 </li>
						<li><i class="el-icon-circle-check"></i> 小米发货 </li>
						<li><i class="el-icon-circle-check"></i> 7天无理由退货 </li>
						<li><i class="el-icon-circle-check"></i> 7天价格保护 </li>
						</ul>
				</div>
			 </div>
		</div>
	</div>
</template>

<script>
	import detailApi from "../"
	export default{
		data(){
			return{
				id:null,
				detailData:[],
				detailPicture:[]
			}
		},
		created() {
			this.id=this.$route.query.productID
			this.getDeatils()
			this.getDetailsPicture()
		},
		methods:{
			async getDeatils(){
				let {data: res} = await detailApi.getDeatils({"productID":this.id});
				this.detailData = res.Product[0]
				console.log(this.detailData)
			},
			async getDetailsPicture(){
				let {data: res} = await detailApi.getDetailsPicture({"productID":this.id});
				this.detailPicture = res.ProductPicture
				console.log(this.detailPicture)
			}
		}
	}
</script>

<style scoped="scoped">
	.pro-policy li{
		float: left;
		margin-right: 20px;
		color: rgb(176, 176, 176);
	}
	.like{
		width: 260px;
		margin-left: 40px;
		background-color: rgb(176, 176, 176)
	}
	.shop-cart{
		width: 340px;
		background-color: rgb(255, 103, 0);
	}
	.button{
		height: 55px;
		margin: 10px 0px 20px;
	}
	.price-sum{
		color: rgb(255, 103, 0);
		font-size: 24px;
		padding-top: 20px;
	}
	.pro-del{
		margin-left: 10px;
		text-decoration: line-through;
	}
	.pro-price{
		float: right;
	}
	.pro-list{
		background: rgb(249, 249, 250);
		padding: 30px 60px;
		margin: 50px 0px;
	}
	.pro-name{
		line-height: 30px;
		color: rgb(97, 97, 97);
	}
	.del{
		font-size: 14px;
		margin-left: 10px;
		color: rgb(176, 176, 176);
		text-decoration: line-through;
	}
	.price{
		padding: 25px 0;
		font-size: 18px;
		color: #FF6700;
		border-bottom: solid 1px rgb(224,224,224);
	}
	.detail_top{
		display: flex;
		padding: 0 130px;
		justify-content: space-between;
	}
	.detail_top>div>span{
		margin-left: 10px;
	}
	img{
		width: 560px;
	}
	.detail_left{
		float: left;
		width: 560px;
		height: 560px;
	}
	.detail_down{
		height: 560px;
		box-shadow:inset 0px 0px 10px #B0B0B0;
		background-color: white;
		padding: 30px 130px;
	}
	.detail_right{
		float: left;
		margin-left: 25px;
		width: 640px;
	}
</style>